<template>
  <div class="problems-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>小题狂练</span>
        </div>
      </template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="卷一" name="1">
          <el-row :gutter="20" v-if="isLoading">
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="item in 12"
              :key="item"
            >
              <el-skeleton
                :rows="3"
                style="width: 220px; height: 150px"
                animated
              />
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else>
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="(item, index) in problem1"
              :key="index"
              ><problem-item :problems="item"
            /></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="卷二" name="2">
          <el-row :gutter="20" v-if="isLoading">
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="item in 12"
              :key="item"
            >
              <el-skeleton
                :rows="3"
                style="width: 220px; height: 150px"
                animated
              />
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else>
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="(item, index) in problem2"
              :key="index"
              ><problem-item :problems="item"
            /></el-col> </el-row
        ></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import problemItem from "@/components/problem-item.vue";
import { getPromblem1Request, getPromblem2Request } from "@/service/answer";
import { onMounted, reactive, ref, toRefs } from "@vue/runtime-core";
export default {
  components: {
    problemItem,
  },
  setup() {
    let isLoading = ref(true);
    const activeName = ref("1");
    const ProblemData = reactive({
      problem1: [],
      problem2: [],
    });
    onMounted(() => {
      requestProblem1();
    });
    const handleClick = (tab) => {
      tab.props.name === 1 ? requestProblem1() : requestProblem2();
    };
    const requestProblem1 = async () => {
      isLoading.value = true;
      const res = await getPromblem1Request();
      ProblemData.problem1 = res.data.problem1Data;
      isLoading.value = false;
    };
    const requestProblem2 = async () => {
      isLoading.value = true;
      const res = await getPromblem2Request();
      ProblemData.problem2 = res.data.problem2Data;
      isLoading.value = false;
    };

    return {
      ...toRefs(ProblemData),
      isLoading,
      handleClick,
      activeName,
    };
  },
};
</script>

<style lang="less" scoped>
.card-header {
  font-weight: 700;
}
</style>
